<!--
 * @Descripttion: 商品成交量排行
 * @version:
 * @Author: 张文韬
 * @Date: 2020-10-13 11:49:35
 * @LastEditors: 张文韬
 * @LastEditTime: 2020-10-13 11:49:43
-->
<template>
  <div>
    <div class="control-box">
      <!-- control 操作区 START -->
      <e-control :search-form-options="formOptions"
                 :search-label-width="searchLabelWidth"
                 :btns="btns"
                 @on-search="searchControlHandle"
                 @on-refresh="refreshControlHandle"
                 @on-export="handleExportData"
                 :operationShow="true">
      </e-control>
      <!-- control 操作区 END -->
    </div>
    <div class="table-box">
      <!-- table 数据表格 START -->
      <e-table :data="tableData"
               :columns="columns"
               stripe
               border
			   show-summary
               :max-height="tableMaxHeight"
               style="width: 100%"
               :current="pageData.pageNum"
               :total="pageData.total"
               @page-size-change="changePageSize"
               @page-current-change="changePageCurrent">
      </e-table>
      <!-- table 数据表格 END -->
   </div>
  </div>
</template>

<script>
import eControl from '@/components/e-control'
import { formOptions, btns } from './control'
import columns from './columns'
import {queryGoodsStatisticsList,exportGoodsStatistics} from "@/api/admin.api";
export default {
  name: 'commodity-turnover-ranking',
  components: {
    eControl
  },
  props: {},
  data () {
    return {
      formOptions,
      columns,
      searchLabelWidth: '100px',
      btns,
      // 控制区高度
      controlHeight: 0,
      // 表格数据
      tableData: [],
      // 分页数据
      pageData: {
        // 当前分页
        pageNum: 1,
        // 分页条数
        pageSize: 10,
        // 数据总数
        total: 0
      },
      searchFormData:{}
    }
  },
  watch: {},
  computed: {
    //表格最大高度
    tableMaxHeight () {
      return window.innerHeight - this.controlHeight - 160
    }
  },
  methods: {
    /**
     * @functionName changePageSize
     * @param {Number} size 分页条数
     * @description 修改分页条数
     * @author 张航
     * @date 2020-09-08 17:57:06
     * @version V1.0.0
     */
    changePageSize (size) {
      this.pageData.size = size
      this.getTableData()
    },
    /**
     * @functionName changePageCurrent
     * @param {Number} current 当前分页
     * @description 修改当前分页
     * @author 张航
     * @date 2020-09-08 18:02:03
     * @version V1.0.0
     */
    changePageCurrent (current) {
      this.pageData.current = current
      this.getTableData()
    },
    // 处理导出数据事件
    handleExportData () {
      exportGoodsStatistics({...this.searchFormData}).then( res=>{
        let blob = new Blob([res], { type: "application/vnd.ms-excel" });
        this.saveAs(blob, "商品成交量排名.xlsx");
      })
    },
    /**
     * @functionName handleSyncSupplierBills
     * @description 保存下载的文件
     * @author 张文韬
     * @date 2020-10-25 14:28:32
     * @version V1.0.0
     */
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      }
      else {
        var link = document.createElement("a");
        var body = document.querySelector("body");
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
    /**
     * @functionName searchControlHandle
     * @param {Object} data 查询参数
     * @description 查询
     * @author 张航
     * @date 2020-09-08 15:01:26
     * @version V1.0.0
     */
    searchControlHandle (data) {
      this.searchFormData = data
      this.refreshPageCurrent()
    },
    /**
     * @functionName refreshControlHandle
     * @param {Object} data 重置后的数据
     * @description 重置查询条件
     * @author 张航
     * @date 2020-09-08 17:01:51
     * @version V1.0.0
     */
    refreshControlHandle (data) {
      this.searchFormData = data
    },
    /**
     * @functionName refreshPageCurrent
     * @description 重置当前分页
     * @author 张航
     * @date 2020-09-22 10:45:57
     * @version V1.0.0
     */
    refreshPageCurrent () {
      this.pageData.current = 1
      this.pageData.total = null
      this.getTableData()
    },
    // 获取日志列表
    getTableData () {
      const searchobj = { ...this.searchFormData, ...this.pageData }
      queryGoodsStatisticsList(searchobj).then(res => {
        this.tableData = res.records
        this.pageData.total = res.total
      })
    }
  },
  created () { },
  mounted () {
    this.getTableData()
  }
}
</script>
<style lang="scss">
  .control-box {
    margin-bottom: 10px;
  }
</style>
